<template>
  <div>
		<!-- 选择人数弹窗 -->
    <van-popup v-model="showPeoNum" :close-on-click-overlay="false" round >
			 <div class="css-peomain">
					<div class="css-peotitle">您好,请选择用餐人数</div>
					<div class="css-peoall">
						<div class="main-div" :style="getStyle(item)" v-for="(item,index) in peoCountlist" @click="activeBtn(item)">
								{{item.num}}
						</div>
					</div>
					<div class="css-startbtn">
						<button class="btn-large color-white bg-primary" @click="gostart()">开始点餐</button>
					</div>
			 </div>
    </van-popup>
    <van-nav-bar fixed title="扫码点餐" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top has-bottom1" style="height:100vh">
      <div class="css-top">
				<div class="css-yzspan">
					<svg-icon icon-class="yizi" class="fs-40 color-primary"/>
					<div	class="css-zhuowei">{{ name }}</div>
				</div>
				<!-- 搜索栏 -->
				<top-search
					type="primary"
					:val="val"
					:area-show="areaShow"
					:input-style="inputStyle"
					:placeholder="placeholder"
					@search="search"
					class="top_search"
				/>
			</div>
   
      <!-- 商品分类及列表栏 -->
      <div class="flex list-content mt-10">
        <!-- 商品分类 -->
				<div class="flex-s-0 scoll-y">
          <ul>
            <li
              class="flex-center fs-26 ptb-36 plr-20 color-black classifyItem"
							:class="activeIndex === '必买' ? 'activeIndex' : ''"
							@click="clickMustBuy"
            >
              <p>必买</p>
            </li>
            <li
              class="flex-center fs-26 ptb-36 plr-20 color-black classifyItem"
              :class="activeIndex === null ? 'activeIndex' : ''"
              @click="clickRecommend"
            >
              <p>推荐</p>
            </li>
            <li
              v-for="(item, index) in classifyList"
              :key="index"
              class="tac fs-26 ptb-36 plr-20 classifyItem"
              :class="index === activeIndex ? 'activeIndex' : ''"
              @click="changeClassify(index)"
            >
              {{ item.Name }}
            </li>
          </ul>
        </div>
        <!-- 商品列表 -->
        <div id="scrollBox" ref="scrollBox" class=" bg-f9 flex-1 scoll-y">
          <productListMeal :product-list="productList" list-type="quickPlaceOrder" @goDetailPage="goDetailPage" @updateCart="updateCart" @showSpec="showSpec" />
          <no-data v-if="productList.length === 0" />
          <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        </div>
      </div>
    </div>

    <!-- 底部栏购物车 -->
    <mealCart :car-list="carList" :shoplist="1" :postType="postType" :peoNumber="peoNumber" :storeId="id" @cleanCart="cleanCart" @updateCart="carUpdateCart" />

    <!-- 商品详情弹窗 -->
    <van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
      <peoductDetail :detail-data="detailData" :storeId="id" :evaluate-data="evaluateData" @clickLeft="clickLeft" @showOpt="showOpt" @changeAddress="changeAddress" />
    </van-popup>

    <!-- 商品规格选择弹窗 -->
    <van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
      <!--<ProductSpec v-show="optPopup.type==='attr'" :storeId="id" :data="optPopup.data" :fresh="optPopup.change" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />-->
			<specTree v-show="optPopup.type==='attr'" :storeId="id" :data="optPopup.data" :fresh="optPopup.change" :switch85="switch85" :switch203="switch203" :switch7="switch7" :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />
		</van-popup>
  </div>
</template>

<script>
import TopSearch from 'components/Search'
import noData from 'components/noData'
import productList from 'components/productList'
import productListMeal from 'components/productListMeal'
import mealCart from 'components/mealCart'
import peoductDetail from 'components/productDetail'
import ProductSpec from 'components/productDetail/spec'
import tree from 'components/productList/tree'
import {  
  GetInintProductDetailInfo,
  GetCommentListByProduct,
} from 'api/product'
import { GetReceivingAddressList, AddOrEditStoreUserCarList,GetStoreUserCarList } from 'api/member'
import { GetStoreInfo, GetStoreProductList,GetStoreProductCategoryList } from 'api/store'
import { GetBusinessFunction } from 'api/businessSetting'
import specTree from 'components/productDetail/specTree'
export default {
  components: {
		mealCart,
		productListMeal,
    TopSearch,
    noData,
    productList,
    peoductDetail,
    ProductSpec,
    tree,
		specTree
  },
  data() {
    return {
			showPeoNum:true,
      peoCountlist:[
				{
					num:1,
					isActive:false
				},
				{
					num:2,
					isActive:false
				},
				{
					num:3,
					isActive:false
				},
				{
					num:4,
					isActive:false
				},
				{
					num:5,
					isActive:false
				},
				{
					num:6,
					isActive:false
				},
				{
					num:7,
					isActive:false
				},
				{
					num:8,
					isActive:false
				},
				{
					num:9,
					isActive:false
				},
				{
					num:10,
					isActive:false
				},
				{
					num:11,
					isActive:false
				},
				{
					num:12,
					isActive:false
				},
				{
					num:13,
					isActive:false
				},
				{
					num:14,
					isActive:false
				},
				{
					num:15,
					isActive:false
				},
				{
					num:16,
					isActive:false
				},
			],
			peoNumber: 0,
      // 搜索栏配置及数据
      id: 0,
			name: '',
      areaShow: false,
      val: '',
      placeholder: '请输入商品名称',
      inputStyle: 'inputStyle-1',
      displayData: {}, // 整体显示设置
      priceDecimalPlaces: 2,
      sortActiveIndex: 0,

      // 分类栏配置及数据
      activeId: -1,
      classifyList: [],
      initClassify: true, // 是否需要初始化分类

      // 商品列表
      productList: [],
      updateList: true, // 是否需要更新商品列表

      // 购物车数据
      carList: [],

      // 商品详情
      detailData: {},
      oldID: 0,
      detailShow: false,

      detailIndex: -1,
      SpecIndex: -1,

      // 评价数据
      evaluateData: {},

      // 收货地址
      addressList: [],

      // sku 商品规格弹窗
      optPopup: {
        data: {},
        type: '',
        change: false,
        show: false,
      },

      cartRequestList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false,

      // 请求参数
      requestData: {
        productName: '',
        pageIndex: 1,
        pageSize: 10,
				IsRecommend: 1,
				productStatus: 1
      },

      commentRequest: {
        page: 1,
        size: 3,
      },
      lng: 0,
      lat: 0,
      bussinessItem: {},
      postType: null,
      topHeight: null,
      pickUptrue: false,
      address: {},
			descriptionList: [],
			activeIndex: null,
			switch203:0,
			switch85:0,
			switch7: 0, // 微商下单不限制库存
    }
  },
  created() {
    
    if (this.$route.query.invit_user_id) {
      localStorage.setItem('invit_user_id', this.$route.query.invit_user_id)
    }
		if (this.$route.query.peoNumber) {
			this.peoNumber = parseInt(this.$route.query.peoNumber)
		}
		if(this.peoNumber !== 0 && this.showPeoNum){
			this.showPeoNum = false
		}
		console.log(this.$route.params,'页面进来')
    if (this.$route.query && this.$route.query.lng) {
      const _query = this.$route.query
      this.lng = _query.lng || 0
      this.lat = _query.lat || 0
    } else {
      const _GeolocationData = localStorage.getItem('GeolocationData')
      if (_GeolocationData) {
        // 存在定位缓存
        const _GeolocationObj = JSON.parse(_GeolocationData)
        if (_GeolocationObj.center && _GeolocationObj.center.length > 0) {
          this.lng = _GeolocationObj.center[0]
          this.lat = _GeolocationObj.center[1]
        } else if (_GeolocationObj.position) {
          this.lng = _GeolocationObj.position.lng
          this.lat = _GeolocationObj.position.lat
        }
      }
    }
		if(this.$route.params.id.indexOf('&') !== -1){
			this.id = this.$route.params.id.split('&')[0]
			var name = this.$route.params.id.split('&')[1]
			this.name = name.split('=')[1]
		}else{
			this.id = this.$route.params.id
		}
   
		if(this.id !== 0){
			localStorage.setItem('storeId', this.id)
		}
		this.GetStoreProductCategoryList()
    this.GetStoreInfo()
    this.GetStoreUserCarList()
    // this.GetReceivingAddressList()
		this.GetBusinessFunction()
  },
  mounted() {
    this.$nextTick(function () {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
			GetBusinessFunction(){
				GetBusinessFunction(203).then(res => {
					if (res) {
						this.switch203 = res.Data[0].Value;
					}
				})
				GetBusinessFunction(85).then(res => {
					if (res) {
						this.switch85 = res.Data[0].Value;
					}
				})
				GetBusinessFunction(7).then(res => {
					if (res) {
						this.switch7 = res.Data[0].Value;
					}
				})
			},
			// 点击选择必买
			clickMustBuy() {				
				this.activeIndex = '必买'
				this.requestData = {}
				this.requestData.PageIndex = 1
				this.requestData.PageSize = 10
				this.requestData.IsMustBuy = 1
				this.productList = []
				this.primaryProductList = []
				this.GetStoreProductList()
			},
		 // 点击选择推荐
		 clickRecommend() {      
      this.activeIndex = null
      this.requestData = {}
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.requestData.IsRecommend = 1
      this.productList = []
      this.primaryProductList = []
      this.GetStoreProductList()
    },
    // 点击选择分类
    changeClassify(index) {
			console.log(index,"index")     
      this.activeIndex = index
      this.category = this.classifyList[index].Name
      this.requestData = {}
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.requestData.CategoryId = this.classifyList[index].ID
      this.productList = []
      this.primaryProductList = []
      this.GetStoreProductList()
    },
		getStyle(item){
				if(item.isActive){
						return {'background-color':'#2cd334','color':'#fff'}
				}
				return {}
		},
		activeBtn(item){
			console.log(item,"试试")
			this.peoNumber = item.num
				let currentState = item.isActive;
						this.peoCountlist.forEach(el=>{
						el.isActive= false
				})
				item.isActive = !currentState
		},
		//开始点餐
		gostart(){
			console.log(this.peoNumber,"值")
			if(this.peoNumber === 0){
				this.$toast('请选择用餐人数')
				return
			}
      this.showPeoNum = false
		},
 
  
    goUrl(url) {
      console.log(url)

      window.location.href = url
    },
    GetStoreInfo() {
      let param = {
        id: this.id,
        lng: this.lng,
        lat: this.lat,
      }
      GetStoreInfo(param).then((res) => {
        if (res) {
          const _this = this
          const _data = res.Data
          const _province = _data.ProvinceName || ''
          const _city = _data.CityName || ''
          const _detailAddress = _data.ContactAddress || ''
          _data.DetailAddress = _province + _city + _detailAddress
          _this.bussinessItem = _data
          if (_data.SelfPickUp == 1) {
            _this.postType = _data.SelfPickUp
            _this.pickUptrue = true
          } else {
            _this.postType = 6
          }
          // 商家介绍
          if (_data.Description) {
            if (_data.Description.indexOf('\n') >= 0) {
              const arr = _data.Description.split('\n')
              arr.forEach(function (item) {
                if (item) {
                  _this.descriptionList.push(item)
                }
              })
            } else {
              _this.descriptionList.push(_data.Description)
            }
          } else {
            _this.descriptionList = ['暂无介绍']
          }
          // 轮播图
          if (res.Data.ShopSign) {
            this.ShopSignList = res.Data.ShopSign.split(',')
          }
        }
      })
    },
    // 关键字搜索商品
    search(key) {
      console.log(key)
      this.resetParams()
      this.requestData.productName = key
      this.GetStoreProductList()
    },
    // 获取收货地址
    GetReceivingAddressList(searchKey = '') {
      GetReceivingAddressList({ searchKey }).then((res) => {
        if (res) {
          res.Data.forEach((item) => {
            if (item.IsDefault) {
              this.address = item
            }
          })
          console.log(this.address)
        }
      })
    },
    showOpt(type) {
      console.log(type)
      if (this.detailIndex !== this.SpecIndex) {
        this.optPopup.data = this.productList[this.detailIndex]
      }
      this.optPopup.type = type
      this.optPopup.show = true
    },

    // 重置请求参数及数据
    resetParams() {
      this.requestData.pageIndex = 1
      this.requestData.pageSize = 10
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
      this.productList = []
    },
    // 点击分类事件
    treeClickEvent(item, treeItem) {
      if (this.activeId !== item.id) {
        this.activeId = item.id
        this.resetParams()
        this.requestData.type = item.id
        this.GetStoreProductList()
      }
    },
    // 打开商品详情弹窗
    goDetailPage(item, index) {
      this.detailIndex = index
      const id = item.ID
      if (id === this.oldID) {
        this.detailShow = true
      } else {
        this.oldID = id
        this.GetCommentListByProduct(id)
        this.GetInintProductDetailInfo(id)
      }
    },
    showSpec(item, index) {
      console.log(item)
      this.SpecIndex = index
      this.optPopup.type = 'attr'
      this.optPopup.data = item
      this.optPopup.show = true
    },
    updateCart(item) {
      const _obj = {}
      _obj.ProductId = item.ID
      _obj.Amount = item.Amount
      _obj.SkuId = item.ProductSkuList[0].ID
      _obj.StoreId = this.id
      _obj.Source = 1
      this.cartRequestList = []
      this.cartRequestList.push(_obj)
      this.AddOrUpdateAmount()
			console.log(this.carList,"www")
    },
    changeAddress(address) {
      console.log(999)
      this.detailData.UserAddress = address
      // this.$forceUpdate()
    },

    // 规格弹窗组件方法
    addCart(arr) {
      console.log(arr)
      this.cartRequestList = arr
      if (this.cartRequestList.length <= 0) {
        this.$toast.fail('请选择商品')
        return
      }
      this.AddOrUpdateAmount()
    },
    closePopup() {
      this.optPopup.show = false
    },
    searchAdress() {},

    // 底部购物车组件方法
    cleanCart() {
      this.carList = []
      this.optPopup.change = !this.optPopup.change
      this.changeArr(this.productList, false)
    },
    carUpdateCart(bool) {
      if (bool) {
        this.GetStoreUserCarList()
      } else {
        this.changeArr(this.productList, false)
      }
    },

    // 详情弹窗方法
    clickLeft() {
      this.detailShow = false
    },

    // 整理数据
    changeArr(Arr, isNew) {
      const _this = this
      console.log(this)
      Arr.forEach((item) => {
        // 图片列表
        if (item.ImageUrl) {
          const ImgUrlList = _this.$utils.strToArr(item.ImageUrl)
          item.logo = ImgUrlList[0]
        }
        item.BaseUnit = item.DefaultUnit
        // 单位列表
        if (item.Unit && item.Unit.indexOf(',') !== -1) {
          item.UnitList = item.Unit.split(',')
          item.BaseUnit = item.UnitList[0]
        }
        // 换算比例列表
        if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
          item.UnitratioList = item.Unitratio.split(':')
        }
        // 按单限购
        if (item.ProductSkuList && item.ProductSkuList.length === 1) {
          item.oLimitBuy = item.ProductSkuList[0].LimitBuy
        }
        // 购物车数量（同步）
        if (_this.carList && _this.carList.length > 0) {
          const _list = _this.carList
          for (let i = 0; i < _list.length; i++) {
            if (_list[i].ProductId === item.ID) {
              // 判断购物车中的商品是否为当前商品
              if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) {
                // 多规格商品
                for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
                  if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                    for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                      if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
                        item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
                        console.log('匹配成功')
                        break
                      }
                    }
                  }
                }
              } else {
                // 单规格商品
                console.log('同步单规格')
                item.Amount = _list[i].Amount
                break
              }
            } else {
              item.Amount = 0
            }
          }
        } else {
          item.Amount = 0
          if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) {
            // 多规格商品
            for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
              if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
                for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                  item.ProductSkuAttrList[j].SkuList[k].Amount = 0
                }
              }
            }
          }
        }
        if (isNew) {
          _this.productList.push(item)
        }
      })
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (
          this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <=
          5
        ) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          if (_this.requestData.pageIndex < _this.totalAmout) {
            _this.requestData.pageIndex++
            _this.GetStoreProductList()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },

    // 获取门店商品分类列表
    GetStoreProductCategoryList() {
      GetStoreProductCategoryList({ storeId: this.id }).then((res) => {
        if (res) {
          this.initClassify = false
          this.classifyList = []          
          this.classifyList = res.Data
					console.log(this.classifyList,"分类")
          this.productList = []
          this.GetStoreProductList()
        }
      })
    },

    // 获取商品列表
    GetStoreProductList() {
      const _this = this
      _this.requestData.storeId = _this.id
			console.log(_this.requestData,'id')
      GetStoreProductList(_this.requestData).then((res) => {
        if (res.Data) {
					console.log(res.Data,'购物车数据')
          if (res.Data.length > 0) {
            console.log('购物车数据')
            console.log(_this.carList)
            console.log(res.Data.Data)
            this.changeArr(res.Data, true)
            _this.totalAmout = res.Data.TotalAmout
            _this.scollRequest = true
            if (_this.scollTop > 0) {
              _this.$refs.scrollBox.scrollTo(0, _this.scollTop)
            }
          }
        }
      })
    },

    // 获取购物车列表
    GetStoreUserCarList() {
      GetStoreUserCarList({ storeId: this.id }).then((res) => {
        if (res) {
          this.carList = res.Data
          if (this.initClassify) {
            this.GetStoreProductCategoryList()
          } else if (this.updateList) {
            this.changeArr(this.productList, false)
          }
        }
      })
    },

    // 获取商品详情
    GetInintProductDetailInfo(id) {
      GetInintProductDetailInfo({ productId: id, InfoType: 1 }).then((res) => {
        if (res) {
          this.detailData = res.Data
          this.detailData.imgList = res.Data.ProductInfo.ImageUrl.split(',')
          this.detailShow = true
        }
      })
    },

    // 更新购物车
    AddOrUpdateAmount() {
      const _obj = {}
      _obj.list = this.cartRequestList
      AddOrEditStoreUserCarList(_obj).then((res) => {
        if (res) {
          console.log(res)
          this.optPopup.show = false
          this.updateList = false
          this.GetStoreUserCarList()
        }
      })
    },

    // 获取评价
    GetCommentListByProduct(id) {
      this.commentRequest.product_id = id
      GetCommentListByProduct(this.commentRequest).then((res) => {
        if (res) {
          console.log(res)
          this.evaluateData = res.Data
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.color-white {
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
}
.list-content {
  height: calc(100% - 90px);
}

// 以上修整完成
.scoll-y {
  overflow-y: scroll;
}
.classifyItem {
  width: 200px;
}
.activeIndex {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    height: calc(100% - 40px);
    width: 8px;
    @include bg-primary();
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 0 8px 8px 0;
  }
}
.van-popup {
  background: transparent;
}
.detail-page {
  background: $colorF5;
}

.tab-bar {
  display: flex;

  flex-direction: row;
  background: $colorF;
  padding: 20px 0;
  .tab-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .teb-item-text {
      display: flex;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .teb-item-border {
      display: flex;
      width: 80px;
      height: 6px;
      border-radius: 3px;
      background: rgba($color: #000000, $alpha: 0);
    }
  }
  .activeBorder {
    .teb-item-text {
      @include color-primary;
    }
    .teb-item-border {
      @include bg-primary();
    }
  }
}
.filter-tab {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 10px 24px 20px;
  .filter-item {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(33% - 15px);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 54px;
    background: $colorF4;
    border: solid 1px $colorF4;
  }
  .filter-checked {
    @include color-primary;
    background: $colorF;
    @include border-primary;
  }
  .filter-active {
    background: transparent;
    color: #000 !important;
    position: relative;
    @include border-primary;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      @include color-primary;
      @include bg-primary;
      opacity: 0.1;
      border-radius: 10px;
    }
  }
  .change-theme {
    background: $colorF;
    border: solid 1px #171817;
  }
  .filter-pop {
    position: absolute;
    z-index: $zIndexPopup;
    top: 84px;
    left: 0;
    width: 100%;
    height: calc(100vh - 370px);
    .filter-cover {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: $colorOverlay;
    }
    .filter-pop-content {
      position: relative;
      background: $colorF;
      .filter-pop-item-box {
        padding: 40px 24px 50px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        .filter-pop-item {
          flex-shrink: 0;
          flex-grow: 0;
          position: relative;
          width: calc(33.33% - 14px);
          margin-right: 20px;
          margin-bottom: 20px;
          text-align: center;
          line-height: 72px;
          padding: 0 20px;
          background: $colorF4;
          border: solid 1px $colorF4;
          border-radius: 6px;
          &:nth-child(3n) {
            margin-right: 0px;
          }
        }
        .filter-selected {
          @include color-primary;
          border-color: currentColor;
          &:before,
          &:after {
            content: '';
            position: absolute;
          }
          &:before {
            background: currentColor;
            width: 54px;
            height: 54px;
            border-radius: 100%;
            bottom: -27px;
            right: -27px;
          }
          &:after {
            width: 6px;
            height: 12px;
            border: 5px solid;
            border-color: transparent $colorF $colorF transparent;
            transform: rotate(45deg);
            bottom: 6px;
            right: 4px;
          }
        }
      }
      .filter-pop-item-box-1 {
        padding: 30px 24px 40px;
        font-size: 26px;
        .filter-pop-item-1 {
          padding: 30px 0;
        }
        .item-checked {
          position: relative;
          @include color-primary;
          &:after {
            content: '';
            position: absolute;
            width: 6px;
            height: 18px;
            border: 5px solid;
            border-color: transparent currentColor currentColor transparent;
            transform: rotate(45deg);
            bottom: 40px;
            right: 10px;
          }
        }
      }
      .filter-bottom {
        padding: 32px 24px;
        position: relative;
        .btn {
          width: calc(50% - 20px);
          line-height: 72px;
          border-radius: 8px;
        }
      }
    }
  }
}
.zIndexBottom {
  z-index: $zIndexHeader;
}
.nav-list--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  height: 120px;
  text-align: center;
  color: #666;
  font-size: 24px;
  border-top: 1px solid #dadada;
  display: flex;
}
.nav-item {
  position: relative;
  text-align: center;
  flex: 1;
}
.nav-list .nav-item a {
  height: 120px;
  padding-top: 70px;
  display: block;
  color: #666;
}
.nav-list--bottom .item-icon {
  top: 10px !important;
  width: 45px;
  height: 48px;
  line-height: 48px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.has-bottom1 {
  padding-bottom: 250px;
}
.mapicon {
  width: 36px;
  height: 36px;
}
.topmain {
  height: 130px;
  padding: 16px 32px 0 32px;
  background: #fff;
}
.top_right {
  // width: 172px;
  height: 50px;
  background: rgba(63, 65, 86, 0.08);
  border-radius: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #666;
    width: 76px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    white-space: nowrap;
  }
  .active {
    color: #fff;
    width: 96px;
    border-radius: 32px;
    padding: 0 24px;
  }
}
.delivery {
  .mapicon {
    width: 24px;
    height: 24px;
  }
}
.top_search {
  height: 90px;
  overflow: hidden;
	flex: 1;
}
.css-peomain{
	width: 604px;
	height: atuo;
	background: #fff;
	padding: 30px 0 30px 30px;
}
.css-peotitle{
 font-size: 34px;
 text-align: center;
}
.css-peoall{
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
}
.main-div{
    width: 116px;
		height: 64px;
		line-height: 64px;
		background: #F4F5F6;
		border-radius: 8px;
		text-align: center;
		color: $color3;
		font-size: $fontSize;
		margin-right: 25px;
		margin-bottom: 24px;
}
.css-startbtn{
	margin-top: 60px;
	margin-bottom: 20px;
	margin-right: 30px !important;
}
.css-top{
	background: white;
	display: flex;
	align-items: center;
}
.css-yzspan{
	margin-top: 25px;
	margin-left: 30px;
	display: flex;
}
.css-zhuowei{
	padding-left: 15px;
	//margin-top: -5px !important;
}
</style>
